<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书馆</title>
    <link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .book-info {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            justify-content: center;
        }

        .askbook-info span {
            line-height: 23px;
            margin-left: 27px;
            color: #272222d6;
            font-size: 13px;
            word-wrap: break-word;
        }


        .book-detail {
            width: 185px;
            height: 34px;
            line-height: 18px;
            margin-left: 27px;
            color: #272222d6;
            font-size: 13px;
            word-wrap: break-word;
        }

        .book-price {
            width: 100%;
            height: 34px;
            font-size: 17px;
            line-height: 60px;
            margin-left: 27px;
            color: #880b16;
        }

        .btn-outline-black {
            color: black;
            background-color: transparent;
            background-image: none;
            border-color: black;
            border-radius: 30px !important;

        }

        * {
            padding: 0;
            margin: 0;
            font-family: Microsoft Yahei, serif;
            box-sizing: border-box;
        }

        .book-list {
            margin: 10px;
            width: 25%;
            padding: 10px;
            background-color: #f2f2f2;
            border: 5px solid;
            border-radius: 5px;
        }

        .book-name {
            line-height: 26px;
            margin-left: 27px;
            font-size: 17px;
            color: #ae6d6a;
        }

        .book-pic img {
            height: 100px
        }#xslist {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between; /* 或者使用space-around */
         }


    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="ClientMain.html">图书管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="ClientRecharge.html">充值</a></li>
            <li><a href="ClientBookList.html">图书馆</a></li>
            <li><a href="ClientEdit.html">修改信息</a></li>
            <li><a href="ClientReturn.html">还书</a></li>
            <li><a href="index.html">退出登录</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <label for="number">书号</label>
                    <input class="form-control" id="number" placeholder="Search" type="text">
                    <label for="name">书名</label>
                    <input class="form-control" id="name" placeholder="Search" type="text">
                    <label for="author">作者</label>
                    <input class="form-control" id="author" placeholder="Search" type="text">
                    <label for="publisher">出版社</label>
                    <input class="form-control" id="publisher" placeholder="Search" type="text">
                </div>
                <button class="btn btn-lg btn-outline-black" id="search" type="submit">查找</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="book-part" id="article">
                <ul class="book-lists" id="xslist">

                </ul><!--  book-list end -->
            </div><!--  book-part end --></div>
    </div>
</div>

<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script>$(document).ready(function () {
    init();
})

function init() {
    getBookList();
    // 绑定搜索按钮点击事件
    const searchButton = document.getElementById("search");
    searchButton.addEventListener("click", function () {
        searchBooks();
    });
}

function getBookList() {
    // 发送AJAX请求获取图书列表
    $.ajax({
        url: "BookListServlet",
        type: "GET",
        dataType: "json",
        success: function (data) {
            addBookList(data);
            console.log(data);
        },
        error: function (xhr, status, error) {
            // 处理发生错误时的情况
            console.log("Error: " + error);
        }
    });
}

function searchBooks() {
    event.preventDefault()
    // 获取搜索关键字
    const number = document.getElementById("number").value;
    const name = document.getElementById("name").value;
    const author = document.getElementById("author").value;
    const publisher = document.getElementById("publisher").value;


    // 发送AJAX请求
    $.ajax({
        url: "BookListServlet",
        type: "GET",
        data: {
            number: number,
            name: name,
            author: author,
            publisher: publisher,

        },
        dataType: "json",
        success: function (data) {
            addBookList(data);
        },
        error: function (xhr, status, error) {
            console.log("Error: " + error);
        }
    });
}

function addBookList(data) {
    const tbody = document.getElementById("xslist");
    let html = "";
    for (let i = 0; i < data.length; i++) {
        const book = data[i];
        html += `<li class="book-list"  id='${book.id}'>
<div class="book-info">
<div class="book-pic">
<img src="static/img/defaultBook.webp" alt="书籍图片">
</div>
<h5 class="book-name">书名：${book.name}</h5>
<span class="book-detail">作者：${book.author}</span>
<span class="book-detail">出版社：${book.publisher}</span>
<span class="book-detail">剩余数量：${book.quantity}</span></div>
<span class="book-price">价格：￥${book.price}
</span>
<button class="btn btn-lg btn-outline-black" onclick="borrow(${book.number})">借出</button>
<button class="btn btn-lg btn-outline-black" onclick="sell(${book.number})">购买</button>
</li>`;
    }
    tbody.innerHTML = html;
}

function borrow(number) {
    $.ajax({
        url: 'ClientBorrowServlet',
        type: 'POST',
        data: {
            number: number
        },
        success: function (data) {
            if (data.msg === "success") {
                alert("借出成功");
            } else if (data.msg === "fall") {
                alert("已借出或售出，无法借出");
            }
            getBookList(); // 在请求成功后刷新页面
        },
        error: function (xhr, status, error) {
            console.error('借出失败：' + number + '，错误信息：' + error);
        }
    });
}

function sell(number) {
    $.ajax({
        url: 'ClientSellServlet',
        type: 'POST',
        data: {
            number: number
        },
        success: function (data) {
            console.log(data)
            if (data.msg === "success") {
                alert("购买成功");
            } else if (data.msg === "fall") {
                alert("已卖出，无法购买");
            }
            getBookList(); // 在请求成功后刷新页面
        },
        error: function (xhr, status, error) {
            alert("购买失败");
            console.error('购买失败：' + number + '，错误信息：' + error);
        }
    });
}

</script>
</body>
</html>